<template>
    <div class="manage" v-loading="loading">
        <div class="top">
            <el-button round size="medium" type="success">创建课程</el-button>
        </div>
        <div v-for="item, index in  courseList " :key="index">
            <div class="course-item">
                <el-image :src="item.coverImage" style="width: 200px; height: 116px; margin-right: 20px;"></el-image>
                <div class="right-info">
                    <div>
                        <el-tag size="small" style="margin-right: 10px;">{{ item.type == 1 ? '初阶课' : (item.type == 2 ? '进阶课'
                            : '高阶课') }}</el-tag>
                        <el-tag v-if="item.examineStatus == '1'" size="small" style="margin-right: 10px;"
                            type="danger">审核中</el-tag>
                        <span class="title">{{ item.title }}</span>
                    </div>
                    <div>
                        学习人数：{{ item.peopleNum }}
                    </div>
                    <div class="textr">
                        <el-link @click="$router.push('/course/' + item.id)">预览课程</el-link>
                        <el-divider direction="vertical"></el-divider>
                        <el-link @click="editCourse(item.id)" :disabled="item.examineStatus == '1'">编辑信息</el-link>
                        <el-divider direction="vertical"></el-divider>
                        <el-link v-if="item.isAvailable == '1'">下架课程</el-link>
                        <el-link v-else="item.isAvailable == '2'">上架课程</el-link>
                        <el-divider direction="vertical"></el-divider>
                        <el-link @click="removeCourse(item.id)" :disabled="removeLoading">删除课程</el-link>
                    </div>
                </div>
            </div>
            <el-divider></el-divider>
        </div>
        <div class="pag">
            <el-pagination background layout="prev, pager, next" :total="totalCount" :current-page="currPage"
                :page-size="pageSize">
            </el-pagination>
        </div>

        <el-dialog title="编辑课程信息" :visible.sync="dialogInfoVisible" width="50%" :before-close="handleClose">
            <el-steps :active="active" finish-status="success">
                <el-step title="课程信息"></el-step>
                <el-step title="课程目录"></el-step>
            </el-steps>
            <el-form ref="form" :model="form" label-width="80px" v-loading="editInfoLoading" v-if="active == 0">
                <el-form-item label="封面">
                    <vue-hover-mask class="center">
                        <el-upload :http-request="uploadImage" action="" :show-file-list="false" :limit="1"
                            :on-exceed="handleExceed" ref="coverImage">
                            <el-image class="square-image" :src="form.coverImage" style="height: 116px;"></el-image>
                        </el-upload>
                        <template v-slot:action>
                            <span slot="default" @click="editCoverImage">点击上传封面</span>
                        </template>
                    </vue-hover-mask>
                </el-form-item>
                <el-form-item label="标题">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="是否收费">
                    <el-select v-model="form.isCharge" placeholder="请选择是否收费">
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="价格" v-if="form.isCharge == '1'">
                    <el-input v-model="form.price"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="form.type" placeholder="请选择类型">
                        <el-option label="初阶" value="1"></el-option>
                        <el-option label="进阶" value="2"></el-option>
                        <el-option label="高阶" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="方向">
                    <el-select v-model="form.direction" placeholder="请选择方向">
                        <el-option :label="citem.content" :value="citem.id" v-for=" citem, index  in  menu.directionList "
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分类">
                    <el-select v-model="form.category" placeholder="请选择分类">
                        <el-option :label="citem.content" :value="citem.id" v-for=" citem, index  in  menu.categoryList "
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="简介">
                    <el-input type="textarea" v-model="form.introduce" :rows="4" resize="none"></el-input>
                </el-form-item>
                <el-form-item label="目标">
                    <el-input type="textarea" v-model="form.target" :rows="4" resize="none"
                        placeholder="每个之间用英文,分割"></el-input>
                </el-form-item>
                <el-form-item label="适用人群">
                    <el-input type="textarea" v-model="form.crowd" :rows="4" resize="none"
                        placeholder="每个之间用英文,分割"></el-input>
                </el-form-item>
                <el-form-item label="技术储备">
                    <el-input type="textarea" v-model="form.needSkill" :rows="4" resize="none"
                        placeholder="每个之间用英文,分割"></el-input>
                </el-form-item>
                <el-form-item label="环境配置">
                    <el-input type="textarea" v-model="form.environment" :rows="4" resize="none"
                        placeholder="每个之间用英文,分割"></el-input>
                </el-form-item>
            </el-form>
            <div v-else>
                <div style="text-align: right;">
                    <el-button type="primary" size="mini" @click="addP(null)">新增父章节</el-button>
                </div>
                <el-collapse class="directory">
                    <el-collapse-item :name="index" v-for="ditem, index in directoryList" :key="index">
                        <template slot="title">
                            <div class="directory-title">
                                <div @click.stop="changeInput(ditem)" v-if="!ditem.input">
                                    <h3>{{ ditem.title }}</h3>
                                </div>
                                <div v-else class="flex">
                                    <el-input v-model="ditem.inputTitle" @click.stop.native=""
                                        @input.stop.native=""></el-input>
                                    <el-button type="info" @click.stop="handleBlur(ditem)">确定</el-button>
                                </div>
                                <div class="d-op">
                                    <el-link @click.stop="addP(ditem.id)">新增子章节</el-link>
                                    <el-link @click.stop="deleteP(ditem.id)">删除父章节</el-link>
                                    <el-link @click.stop="move(ditem.id, 1)">上移</el-link>
                                    <el-link @click.stop="move(ditem.id, 2)">下移</el-link>
                                </div>
                            </div>
                        </template>
                        <div class="directory-child-item" v-for="dcitem, cindex in ditem.childList" :key="cindex">
                            <div @click.stop="changeInput(dcitem)" v-if="!dcitem.input">
                                <i class="el-icon-video-camera-solid"></i>
                                <span>视频：{{ dcitem.title }}</span>
                            </div>
                            <div v-else class="flex">
                                <el-input v-model="dcitem.inputTitle" @click.stop.native=""
                                    @input.stop.native=""></el-input>
                                <el-button type="info" @click.stop="handleBlur(dcitem)">确定</el-button>
                            </div>
                            <div class="d-op">
                                <el-link>上传视频</el-link>
                                <el-link @click.stop="deleteP(dcitem.id)">删除子章节</el-link>
                                <el-link @click.stop="move(dcitem.id, 1)">上移</el-link>
                                <el-link @click.stop="move(dcitem.id, 2)">下移</el-link>
                            </div>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
            <span slot="footer" class="dialog-footer">
                <div v-if="active == 0">
                    <el-button @click="dialogInfoVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updataCourseInfo" :loading="updateLoding">下一步</el-button>
                </div>
                <div v-if="active == 1">
                    <el-button @click="active--">上一步</el-button>
                    <el-button type="primary" @click="saveCourse" :loading="saveLoading">保 存</el-button>
                </div>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    reqCoueseManageList, reqCourseManageInfo, reqUpdateCourse, reqCouerseDirectory, reqRemoveCourse,
    requpdateDirectory, reqSaveDirectory
} from "@/api/course"
import { reqUploadImage } from "@/api/oss"
import { reqMenu } from '@/api/course'

export default {
    name: "manage",
    data() {
        return {
            active: 0,
            dialogInfoVisible: false,
            loading: false,
            editInfoLoading: false,
            saveLoading: false,
            removeLoading: false,
            updateLoding: false,
            currPage: 1,
            pageSize: 10,
            totalCount: 0,
            courseList: [],
            menu: {},
            form: {},
            directoryList: []
        }
    },
    mounted() {
        this.getCoueseManageList();
        this.getMenu();
    },
    methods: {
        getCoueseManageList() {
            this.loading = true;
            reqCoueseManageList({
                page: this.currPage,
                limit: this.pageSize
            }).then((res) => {
                this.courseList = res.data.list;
                this.pageSize = parseInt(res.data.pageSize);
                this.currPage = parseInt(res.data.currPage);
                this.totalCount = parseInt(res.data.totalCount);
                this.loading = false;
            }).catch((error) => {
                this.loading = false;
                this.$message.error(error.message)
            })
        },
        getMenu() {
            reqMenu().then((res) => {
                this.menu = res.data;
            }).catch((error) => {
                this.$message.error(error.message)
            })
        },
        editCourse(id) {
            this.dialogInfoVisible = true;
            this.editInfoLoading = true;
            this.active = 0;
            this.chooseId = id;
            // 请求课程信息
            reqCourseManageInfo({
                id: id
            }).then((res) => {
                this.form = res.data
                this.editInfoLoading = false
            }).catch((error) => {
                this.editInfoLoading = false
                this.$message.error(error.message)
            })

            // 请求目录
            this.getCourseDirectory(id);
        },
        getCourseDirectory(id) {
            reqCouerseDirectory({
                courseId: id,
            }).then((res) => {
                var list = res.data;
                list.forEach(item => {
                    item.input = false;
                    item.inputTitle = item.title;
                    if (item.childList != null) {
                        item.childList.forEach(citem => {
                            citem.input = false;
                            citem.inputTitle = item.title;
                        })
                    }

                });
                this.directoryList = list;
            }).catch((error) => {
                this.$message.error(error.message)
            })
        },
        handleClose(done) {
            done();
            this.form = {}
        },
        // 点击上传图片事件
        editCoverImage() {
            this.$refs["coverImage"].$refs["upload-inner"].handleClick();
        },
        // 超出限制
        handleExceed(files, fileList) {
            this.$message.warning("只能选择一张图片")
        },
        // 上传封面
        uploadImage(param) {
            const formData = new FormData()
            formData.append('file ', param.file)
            reqUploadImage(formData).then((res) => {
                this.form.coverImage = res.data
            }).catch((error) => {
                this.$message.error(error.message)
            })
        },
        saveCourse() {
            this.dialogInfoVisible = false;
            this.$message.success("保存成功");
        },
        removeCourse(id) {
            this.$confirm('此操作将永久删除该课程, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.removeLoading = true;
                reqRemoveCourse(id).then((res) => {
                    this.removeLoading = false;
                    this.$message.success(res.message);
                    this.getCoueseManageList();
                }).catch((error) => {
                    this.removeLoading = false;
                    this.$message.error(error.message);
                })
            }).catch(() => { });
        },
        addP(id) {
            if (id == null) {
                // 发送请求保存父章节
                reqSaveDirectory({
                    parentId: 0,
                    courseId: this.chooseId
                }).then((res) => {
                    this.getCourseDirectory(this.chooseId);
                }).catch((error) => {
                    this.removeLoading = false;
                    this.$message.error(error.message);
                })
            } else {
                // 发送请求保存子章节
                reqSaveDirectory({
                    parentId: id,
                    courseId: this.chooseId
                }).then((res) => {
                    this.getCourseDirectory(this.chooseId);
                }).catch((error) => {
                    this.removeLoading = false;
                    this.$message.error(error.message);
                })
            }

        },
        changeInput(item) {
            item.input = true;
            item.inputTitle = item.title;
        },
        handleBlur(item) {
            // 发送请求更新标题
            requpdateDirectory({
                id: item.id,
                title: item.inputTitle,
            }).then((res) => {
                item.input = false;
                item.title = item.inputTitle;
            }).catch((error) => {
                this.$message.error(error.message);
            })
        },
        updataCourseInfo() {
            this.updateLoding = true;
            // 更新课程信息
            // 若无需收费则价格为不要了
            if (this.form.isCharge == "2") this.form.price = null;
            reqUpdateCourse(this.form).then((res) => {
                this.active++;
                this.updateLoding = false;
            }).catch((error) => {
                this.removeLoading = false;
                this.$message.error(error.message);
            })
        },
        deleteP(id) {
            requpdateDirectory({
                id: id,
                status: 2
            }).then((res) => {
                this.getCourseDirectory(this.chooseId);
            }).catch((error) => {
                this.$message.error(error.message);
            })
        },
        move(id, type) {
            requpdateDirectory({
                id: id,
                type: type
            }).then((res) => {
                this.getCourseDirectory(this.chooseId);
            }).catch((error) => {
                this.$message.error(error.message);
            })
        }
    },
}
</script>

<style scoped>
.course-item {
    display: flex;
}

.manage {
    padding: 0 20px;
}

.top {
    text-align: right;
    margin-bottom: 20px;
}

.title {
    font-size: 20px;
    font-weight: 600;
}

.right-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.textr {
    text-align: right;
}

.directory {
    margin: 5px 0;
}

.directory-child-item {
    cursor: pointer;
    padding: 10px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.directory-child-item i {
    font-size: 18px;
    margin-right: 5px;
}

.directory-child-item:hover {
    background-color: rgb(250, 248, 248);
}

.directory-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.d-op .el-link {
    margin-right: 5px;
    font-size: 12px;
}

.pag {
    text-align: center;
}

.flex {
    display: flex;
    align-items: center;
}
</style>